<template>
  <div class="bg">
    <!--<div class="jihuo">
      <router-link to="/"><button class="btn_go"></button></router-link>
    </div>-->
    <div class="exit">
      <router-link to="/"><button class="btn_go"></button></router-link>
    </div>
    <div class="read">
      <router-link to="/chengbao/read1"><button class="btn_go"></button></router-link>
    </div>
    <div class="science">
      <router-link to="/chengbao/science1"><button class="btn_go"></button></router-link>
    </div>
    <div class="math">
      <router-link to="/chengbao/math1"><button class="btn_go"></button></router-link>
    </div>
    <div class="art">
      <router-link to="/chengbao/art1"><button class="btn_go"></button></router-link>
    </div>
    <div class="kecheng">
      <router-link to="/chengbao"><button class="btn_go"></button></router-link>
    </div>
    <div class="play">
      <button class="btn_go"></button>
    </div>
    <div class="board">
      <router-link to="/chengbao/board"><button class="btn_go"></button></router-link>
    </div>
    <div class="keyboard">
      <router-link to="/chengbao/keyboard"><button class="btn_go"></button></router-link>
    </div>
    <div class="music" @click="goPath('musicplay')">
      <button class="btn_go"></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
    }
  },
  methods: {
    goPath: function (namePath) {
      console.log('check')
      if (this.$store.state.active) {
        this.$router.push({name: namePath})
      } else {
        alert('授权失败')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../assets/bg1.png);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
.jihuo{
  position: absolute;
  background:url(../../assets/jihuo.png) no-repeat;
  background-size:100%;
  height:50px;
  width:100px;
  top:10px;
  right:250px;
}
.exit{
  position: absolute;
  background:url(../../assets/exit.png) no-repeat;
  background-size:100%;
  height:50px;
  width:100px;
  top:10px;
  right:130px;
}
.read{
  position: absolute;
  height:580px;
  width:280px;
  left:25px;
  top:65px;
  background:url(../../assets/yuedu.png) no-repeat;
}
.science{
  position: absolute;
  height:580px;
  width:280px;
  left:325px;
  top:65px;
  background:url(../../assets/kexue.png) no-repeat;
}
.math{
  position: absolute;
  height:580px;
  width:280px;
  left:625px;
  top:65px;
  background:url(../../assets/shuxue.png) no-repeat;
}
.art{
  position: absolute;
  height:580px;
  width:280px;
  left:925px;
  top:65px;
  background:url(../../assets/meishu.png) no-repeat;
}
.kecheng{
  position: absolute;
  height:50px;
  width:140px;
  left:218px;
  top:660px;
  background:url(../../assets/menus/class2.png) no-repeat;
}
.play{
  position: absolute;
  height:50px;
  width:140px;
  left:395px;
  top:660px;
  background:url(../../assets/menus/play1.png) no-repeat;
}
.board{
  position: absolute;
  height:50px;
  width:140px;
  left:565px;
  top:660px;
  background:url(../../assets/menus/board1.png) no-repeat;
}
.keyboard{
  position: absolute;
  height:50px;
  width:140px;
  left:735px;
  top:660px;
  background:url(../../assets/menus/keyboard1.png) no-repeat;
}
.music{
  position: absolute;
  height:50px;
  width:140px;
  left:915px;
  top:660px;
  background:url(../../assets/menus/music1.png) no-repeat;
}
</style>
